import React from "react";
import { Tag, Space } from "antd";
import { useSelector, useDispatch } from "react-redux";
import { useNavigate } from "react-router-dom";
import { setCurrentMenu, deleteMenu } from "../../store/reducers/tab";
import "./index.css";

const CommonTag = () => {
  const tabList = useSelector((state) => state.tab.tabList);
  const currentMenu = useSelector((state) => state.tab.currentMenu);
  const navigate = useNavigate();
  const dispatch = useDispatch();

  const handleClose = (path, index) => {
    console.log("path", path);
    dispatch(deleteMenu({path, index}));
    console.log('currentMenu', currentMenu) 
    navigate(tabList[index - 1].path)
  };

  const handClick = (path) => {
    navigate(path);
    dispatch(setCurrentMenu(path));
  };

  return (
    <Space className="common-tag" size={[0, 8]} wrap>
      {tabList.map((item, index) => (
        <Tag
          key={item.path}
          color={item.path === currentMenu ? "#55acee" : ""}
          closeIcon={item.path !== "/home"}
          onClose={
            item.path === "/home" ? () => {} : () => handleClose(item.path, index)
          }
          onClick={() => handClick(item.path)}
        >
          {item.label}
        </Tag>
      ))}
    </Space>
  );
};

export default CommonTag;
